<template>
  <div class="warehouse-add">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/warehouse' }">仓库管理</el-breadcrumb-item>
      <el-breadcrumb-item>新增仓库</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 仓库信息表单 -->
    <div class="form-container">
      <el-form :model="warehouseForm" :rules="rules" ref="warehouseFormRef" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="仓库编号" prop="code">
              <el-input placeholder="自动获取系统编号" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库名称" prop="name">
              <el-input v-model="warehouseForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="仓库容量/m³" prop="area">
              <el-input v-model="warehouseForm.area" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库管部门" prop="department">
              <el-select v-model="warehouseForm.department" placeholder="请选择" style="width: 100%">
                <el-option label="请选择" value=""></el-option>
                <el-option label="张三" value="张三"></el-option>
                <el-option label="李四" value="李四"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="仓库主管" prop="manager">
              <el-select v-model="warehouseForm.manager" placeholder="请选择" style="width: 100%">
                <el-option label="请选择" value=""></el-option>
                <el-option label="张三" value="张三"></el-option>
                <el-option label="李四" value="李四"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="contactPhone">
              <el-input v-model="warehouseForm.contactPhone" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="仓库地址" prop="address">
          <el-input v-model="warehouseForm.address" placeholder="请输入"></el-input>
        </el-form-item>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="排序" prop="sortOrder">
              <el-input v-model.number="warehouseForm.sortOrder" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="库位数量" prop="zoneNumber">
              <el-input v-model.number="warehouseForm.zoneNumber" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="仓库状态">
              <el-radio-group v-model="warehouseForm.status">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        
        
        
        <el-form-item label="备注">
          <el-input v-model="warehouseForm.description" type="textarea" rows="4" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <!-- 库区信息部分 -->
    <div class="zone-section">
      <div class="section-header">
        <h2>库区信息</h2>
      </div>
      
      <!-- 库区信息操作按钮 -->
      <div class="toolbar">
        <el-button type="success">新增</el-button>
        <el-button type="danger">删除</el-button>
        <el-button type="primary">导入</el-button>
        <el-button>导出</el-button>
      </div>

      <!-- 库区信息显示列表 -->
      <el-table
            :data="tableData"
            style="width: 100%; margin-bottom: 20px"
            row-key="id"
            border
            default-expand-all
            >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="code" label="库区编号" width="200"></el-table-column>
        <el-table-column prop="name" label="库区名称" width="150"></el-table-column>
        <el-table-column prop="warehouseName" label="所属仓库" width="180"></el-table-column>
        <el-table-column prop="zoneType" label="库区类型" width="120"></el-table-column>
        <el-table-column prop="area" label="库区容量/m³" width="120"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
              {{ scope.row.status === 1 ? '启用' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="备注" min-width="150"></el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-button type="primary" size="small" icon="Edit">编辑</el-button>
            <el-button type="danger" size="small" icon="Delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页部分 -->
    <div class="pagination-container">
            <el-pagination
                v-model:current-page="PageInfo.PageIndex"
                v-model:page-size="PageInfo.PageSize"
                :page-sizes="[5, 10, 20, 50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="PageInfo.TotalCount"
            />
    </div>

    </div>
  </div>

  <!-- 按钮 -->
    <div class="fixed-bottom">
      <el-button type="danger" @click="cancel">取消</el-button>
      <el-button type="success" @click="savewarehouse">保存</el-button>
    </div>

</template>

<script lang="ts" setup>
import { ref, reactive, onMounted,watch } from 'vue';
import axios from 'axios';
import { ElMessage,ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();

// 仓库表单引用
const warehouseFormRef = ref(null);

// 仓库表单数据
const warehouseForm = reactive({
  name: '',
  address: '',
  status: 1,
  contactPerson: '',
  contactPhone: '',
  area: 0,
  zoneNumber: 0,
  description: '',
  warehouseType: 0,
  manager: '',
  department: '',
  sortOrder: 0,
  isQuitLocked: false
});

// 表单验证规则
const rules = {
  name: [
    { required: true, message: '请输入仓库名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  department: [
    { required: true, message: '请输入库管部门', trigger: 'blur' }
  ],
  address: [
    { required: true, message: '请输入仓库地址', trigger: 'blur' }
  ]
};

// 保存仓库
const savewarehouse = async () => {
  if (!warehouseFormRef.value) return;
  
  try {
    // 表单验证
    await warehouseFormRef.value.validate();
    
    // 发送保存请求
    const response = await axios.post('http://localhost:8080/api/app/ware-house-manage/warehouse', warehouseForm);
    
    if (response.data) {
      ElMessage.success('仓库添加成功');
      // 返回仓库列表页
      router.push('/showwarehouse');
    }
  } catch (error) {
    console.error('保存仓库失败:', error);
    ElMessage.error('保存失败，请检查表单数据');
  }
};

//响应式数据
    const tableData = ref([{
    "id": "",
    "warehouseId": "",
    "code": "",
    "name": "",
    "zoneType": '',
    "status": '',
    "description": "",
    "area": '',
    "warehouseName": ""
    }])

//钩子函数
    onMounted(()=>{
        search();
    })

    //分页参数
    const PageInfo=ref({
        PageIndex:1,
        PageSize:5,
        TotalCount:0,
        TotalPage:0
    })
    //查询参数
    const formInline =ref({
        Name: '',
        ZoneType: '',
        WarehouseId: '',
        SkipCount: 0,
        MaxResultCount: 10
    })

    //侦听
    watch(PageInfo,()=>{
        search();
    },{deep:true})

    //显示库区列表
    const search=()=>{

        // 设置分页参数为数字
        formInline.value.SkipCount = (PageInfo.value.PageIndex - 1) * PageInfo.value.PageSize;
        formInline.value.MaxResultCount = PageInfo.value.PageSize;

        axios.get("http://localhost:8080/api/app/zone/paged-list", {params: {
            Name: formInline.value.Name,
            Address: formInline.value.ZoneType,
            WarehouseId: formInline.value.WarehouseId,
            SkipCount: formInline.value.SkipCount,
            MaxResultCount: formInline.value.MaxResultCount
        }})
        .then(res => {
            if(res.data && res.data.items) {
                tableData.value = res.data.items;
                PageInfo.value.TotalCount = res.data.totalCount || 0;
                PageInfo.value.TotalPage = Math.ceil(PageInfo.value.TotalCount / PageInfo.value.PageSize);
            }
        })
    }

</script>

<style scoped>
.warehouse-add {
  padding: 20px;
}

.form-container {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.zone-section {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.toolbar {
  margin: 15px 0;
}
</style>